<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input type="text" id="inp1">
    <select name="" id="sel">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" id="inp2">
    <input type="button" value="=" id="btn">
    <input type="text" id="inp3">


    <script>

        // 1 找对象

        var obj1 = document.getElementById('inp1') ;
        console.log(obj1) ;  // 测试对象是否拿到
        var obj2 = document.getElementById('inp2') ;
        console.log(obj2) ;  // 测试对象是否拿到
        var oBtn = document.getElementById('btn') ;
        console.log(oBtn) ;  // 测试对象是否拿到
        var oRes = document.getElementById('inp3') ;
        console.log(oRes) ;  // 测试对象是否拿到

        // 拿到符号的对象
        var oSel = document.getElementById('sel') ;


        // 2 写点击事件
        oBtn.onclick = function() {

            // 拿到符号的值
            var f = oSel.value ;
            console.log(f) ;

            // 拿到输入框的值
            var n1 = obj1.value ;
            var n2 = obj2.value ;


            // 判断符号
            if(f === '+') {
                var res = n1 * 1 + n2 * 1 ;
                // 放到最后一个输入框中
                oRes.value = res ;
            }
            else if(f === '-') {
                var res = n1 - n2 ;
                oRes.value = res ;
            }


        }



    </script>
    
</body>
</html>